<template>
    <Card style="height:900px">
        <Form ref="form" :model="form" :rules="rules" :label-width="500">
            <FormItem label="客户经理">
                <Input disabled v-model="form.custName" style="width: 250px"></Input>
            </FormItem>
            <FormItem label="面签日期" prop="appointmentDate">
                <Date-picker style="width: 250px" type="datetime" :value="form.appointmentDate" v-model="form.appointmentDate" :editable="false" format="yyyy-MM-dd hh:ss:mm" :options="disableOption">
                </Date-picker>
            </FormItem>
            <FormItem label="时间段" prop="timeId">
                <i-select v-model="form.timeId" size="large" placeholder="--请选择--" style="width:250px">
                    <i-option v-for="item in timeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </FormItem>
            <FormItem label="贷款ID">
                <Input v-model="form.loanId" disabled style="width: 250px">
                </Input>
            </FormItem>
            <FormItem label="面签人员" prop="faceJobId">
                <i-select v-model="form.faceJobId" size="large" placeholder="--请选择--" style="width:250px">
                    <i-option v-for="item in faceJobIdList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </FormItem>
            <br><br>
            <FormItem>
                <Button type="primary" @click="submit">确定</Button>
                <Button @click="resetInput">重置</Button>
                <Button type="ghost" style="margin-left: 8px" @click="goBack">返回</Button>
            </FormItem>
        </Form>

    </Card>
</template>

<script>
const dateValidate = (rule, value, callback) => {
  if (!value || value === null || value === '') {
    callback(new Error('面签日期不能为空'))
  } else {
    callback()
  }
}
export default {
  data () {
    return {
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      faceJobIdList: [],
      timeList: [],
      form: {
        custName: null,
        appointmentDate: null,
        timeId: null,
        faceJobId: null,
        loanId: null,
        appointmentDateStr: null
      },
      copydata: {},
      rules: {
        appointmentDate: [
          { validator: dateValidate, required: true, trigger: 'change' }
        ],
        timeId: [
          { required: true, message: '时间段不能为空', trigger: 'blur' }
        ],
        faceJobId: [
          { required: true, message: '面签人员不能为空', trigger: 'blur' }
        ]
      },
      disableOption: {
        disabledDate: date => {
          return date && date.valueOf() <= Date.now()
        }
      }
    }
  },
  methods: {
    submit () {
      var vm = this
      this.$refs.form.validate(valid => {
        if (valid) {
          var config = {
            title: '提示',
            content: '是否确认修改?',
            onOk: vm.updateFacesigTask
          }
          vm.$Modal.confirm(config)
        }
      })
    },
    resetInput () {
      var vm = this
      vm.form.appointmentDate = vm.copydata.appointmentDate
      vm.form.timeId = vm.copydata.timeId
      vm.form.faceJobId = vm.copydata.faceJobId
    },
    // 新建面签任务
    updateFacesigTask: function () {
      var params = this.form
      this.$ajax.post(this.baseUrl + '/approve/spmq/service/updateAppointment', params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        } else {
          this.$Message.success(message)
          this.goBack()
        }
        this.handleGoBack()
      }).catch(er => {

      })
    },
    goBack: function () {
      this.$router.back()
    },
    initpage: function () {
      var vm = this
      this.$ajax.post(this.baseUrl + '/approve/spmq/service/queryAppointmentDetail/' + this.$route.query.id).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          vm.$Message.warning(message)
        } else {
          vm.form = data.data.faceSigAppointment
          vm.form.appointmentDate = vm.$util.formatTime(data.data.faceSigAppointment.appointmentDate ? data.data.faceSigAppointment.appointmentDate : '')
          vm.form.timeId = vm.form.timeId + ''
          var userList = data.data.userList || []
          var timeList = data.data.timeList || []
          userList.forEach(item => {
            vm.faceJobIdList.push({
              label: item.userNamep,
              value: item.userCode
            })
          })
          timeList.forEach(item => {
            vm.timeList.push({
              label: item.startTime + '-' + item.endTime,
              value: item.facesigId + ''
            })
          })
          vm.copydata = JSON.parse(JSON.stringify(vm.form))
        }
      }).catch(er => {

      })
    }
  },
  computed: {
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initpage()
  },
  mounted () {
  }

}
</script>
